<template>
	<cu-custom bgColor="" :isBack="true">
		<template #title>学校详情</template>
	</cu-custom>
	
	<scroll-view scroll-x class="bg-white nav text-center" style="width:100%;position: fixed;z-index: 11;">
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input
					:enable-native="false"
					type="text"
					v-model="searchValue"
					placeholder="输入关键词筛选学校信息"
					confirm-type="search"
					@confirm="handleSearch(null)"
					@blur="handleBlur"
					@input="inputChange"
				/>
				<view class="action" v-show="searchValue" @click="handleClear">
					<text>取消</text>
				</view>
			</view>
		</view>
		<view class="recommend-list">
			<view
				v-show="recommendVisiable"
				v-for="(item, index) in currRecommend"
				:key="index"
				class="text-black single-recommend"
				@click="handleSearch(item)"
			>
				{{ item }}
			</view>
		</view>
	</scroll-view>
	
	
	<view class="default-box" style="border-radius: 0;padding-top: 1.2rem;">
		<view class="school-name mb-2">
			<view class="text-bold text-black">
				{{ schoolInfo.name }}
			</view>
			<view class="icon">
				<image src="/static/images/school_1.png" />
			</view>
		</view>
		
		<view class="tag-row mb-2">
			<view class="tag" v-for="(tag, index) in schoolInfo.tags" :key="index">
				{{ tag }}
			</view>
		</view>
		
		<view class="mb-2">
			<text class="middle-text" style="font-size:34rpx">校长：</text>
			<text class="middle-text">{{ schoolInfo.principal }}</text>
		</view>
		
		<view class="info-row mb-2">
			<view class="single-info">
				<text class="middle-text" style="font-size:34rpx">教职工：</text>
				<text class="middle-text">{{ schoolInfo.teacherCount }}</text>
			</view>
			<view class="single-info">
				<text class="middle-text" style="font-size:34rpx">学生：</text>
				<text class="middle-text">{{ schoolInfo.studentCount }}</text>
			</view>
		</view>
		
		<view class="mb-2" v-if="schoolInfo.contact_name">
			<text class="middle-text" style="font-size:34rpx">学校负责人：</text>
			<text class="middle-text">{{ schoolInfo.contact_name }}</text>
		</view>
		
	</view>
	
	<!-- 1 -->
	<view v-if="schoolInfo.details.length" v-for="(item, index) in schoolInfo.details" :key="index">
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue">{{ item.fullname }}</text>
				<text class="bg-blue"></text>
			</view>
		</view>
		<!-- 2 -->
		<view v-if="item.children" v-for="(item_2, index) in item.children" :key="index">
			<view class="cu-bar bg-white label-click" @click="setChildShow(item_2)">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text>{{ item_2.fullname }}</text>
				</view>
				
				<view v-if="!item_2.children" style="padding-right: 40rpx;" >
					{{ item_2.value || "暂无数据" }}
				</view>
				<view v-else class="right-icon" :style="{
						transform: 'rotate(' + (item_2.child_show ? '90' : '0') + 'deg)'
					}">
					<text class="cuIcon-right" />
				</view>
			</view>
			
			<!-- 3 -->
			<view style="transition: all .3s;overflow: hidden;" :style="{
				height: item_2.child_show ? (80 * item_2.children.length + 'rpx') : '0'
			}">
				<view v-if="item_2.children" v-for="(item_3, index) in item_2.children" :key="index" class="label">
					<view class="label-title">
						{{ item_3.fullname }}
					</view>	
					<view class="label-content">
						{{ item_3.value || "暂无数据" }}
					</view>	
				</view>
			</view>	
		</view>
		<!-- <view v-else class="">筛选结果为空</view> -->
		
	</view>	
	
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app"
import { reactive, ref, Ref } from 'vue';
import { getSchoolDetail } from "@/api/school.js"

interface IDetail {
	abbreviation: string
	children: IDetail[]
	fullname: string
	dataType: string
	value: string
	child_show?: boolean
}
interface ISchool {
	id: number
	name: string
	tags: string[]
	principal: string
	teacherCount: number
	studentCount: number
	contact_phone: string
	contact_name: string
	details: any[]
}

const props = defineProps({
	school_id: {
		type: String,
		default: 0
	}
})

const schoolInfo = reactive({
	id: "",
	name: "",
	tags: [],
	principal: "",
	teacherCount: null,
	studentCount: null,
	contact_phone: null,
	contact_name: "",
	details: []
})
let oriDetails:IDetail[] = []
const recommendList:Set<string> = new Set()
const recommendVisiable:Ref<boolean> = ref(false)
let currRecommend:string[] = []

const searchValue:Ref<string> = ref("")
let searchable = false
const inputChange = ():void => {
	searchable = true
	currRecommend = []
	if (searchValue.value) {
		for (let v of recommendList) {
			if (v.indexOf(searchValue.value) > -1) {
				currRecommend.push(v)
				if (currRecommend.length >= 5) {
					break
				}
			}
		}
	}
	if (currRecommend) {
		recommendVisiable.value = true
	}
}
const handleBlur = () => {
	recommendVisiable.value = false
}
const handleClear = () => {
	searchValue.value = ""
	searchable = true
	handleSearch(null)
}
const handleSearch = (e:any|null) => {
	if (e) {
		searchValue.value = e
		recommendVisiable.value = false
	} else {
		if (!searchable) return
	}
	searchable = false
	
	if (!searchValue.value) {
		schoolInfo.details = [...oriDetails]
	}
	schoolInfo.details = filterDetail(oriDetails, searchValue.value)
}

const filterDetail = (details: IDetail[], keyword:string):IDetail[] => {
	const result = []
	if (!details) return []
	const details_copy = JSON.parse(JSON.stringify(details))
	details_copy.map((detail:IDetail) => {
		if (detail.fullname.indexOf(keyword) > -1 || detail.abbreviation.indexOf(keyword) > -1) {
			console.log("匹配", detail.fullname, detail.abbreviation)
			result.push(detail)
		} else {
			const children:IDetail[] = filterDetail(detail.children, keyword)
			if (children.length > 0) {
				detail.child_show = true
				detail.children = children
				result.push(detail)
			}
		}
	})
	
	return result
}


const setChildShow = (e:any):void => {
	if (e.child_show || !e.children) {
		e.child_show = false
	} else {
		e.child_show = true
	}
}


const initRecommend = (details: IDetail[]):void => {
	// 初始化推荐搜索
	if (!details) return
	details.map((detail) => {
		recommendList.add(detail.fullname)
		initRecommend(detail.children)
	})
}

onLoad((options:any) => {
	getSchoolDetail(options.school_id)
		.then((res:any) => {
			schoolInfo.id = res.id
			schoolInfo.name = res.name
			schoolInfo.principal = res.principal
			schoolInfo.studentCount = res.studentTotal
			schoolInfo.teacherCount = res.staffTotal
			schoolInfo.details = res.details
			oriDetails = [...res.details]
			
			initRecommend(oriDetails)
		})
})
</script>

<style lang="stylus">
.tag-row
	display: flex
	flex-wrap: wrap
	.tag
		font-size 24rpx
		padding: 6rpx 18rpx
		border-radius 30rpx
		background-color: #f0f5ff
		color #3974df
		margin-right: 16rpx
		margin-bottom: 8rpx
.info-row
	display: flex
	.single-info
		width: 50%
.division-line
	width: 100%
	height: 2rpx
	background-color: #ededed
	
.contact-school
	padding-top: 40rpx
	display: flex
	justify-content: center
	align-items: center
	height: 68rpx
	.cuIcon-dianhua
		font-size: 46rpx
		margin-right: 22rpx
.school-name	
	font-size 40rpx
	color #3974df
	font-weight 400
	display: flex
	align-items: center
	justify-content: space-between
	.icon
		color #000
		width: 44rpx
		height: 44rpx
		image
			width 100%
			height: 100%
.label
	display: flex
	justify-content: space-between
	align-items: center
	height: 80rpx
	background: #fff
	padding: 0 44rpx
	font-size: 30rpx
	.label-title
		color: #333
	.label-content
		color: #7d7d7d
		
.label-click:active
	background: #eee
		
.cu-bar .action.sub-title text[class*="text-"]:last-child
	height: 20rpx
	bottom: -10rpx
	left: 20rpx
	
.right-icon
	padding-right: 40rpx
	transition: all .3s
	transform-origin: 15rpx 15rpx
.recommend-list
	position: fixed
	background: #fff
	width: 100%
	box-shadow: 0 8rpx 8rpx #eee
	.single-recommend
		font-size: 30rpx;
		line-height: 66rpx;
		text-align: left;
		padding: 0 54rpx
	.single-recommend:hover
		background-color #eee
  
</style>
